<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://unpkg.com/element-ui@2.15.9/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <template>
        <div class="login">
            <div class="mylogin" align="center">
                <h4>登录</h4>
                <el-form
                        :model="loginForm"
                        :rules="loginRules"
                        ref="loginForm"
                        label-width="0px"
                >
                    <el-form-item label="" prop="account" style="margin-top: 10px">
                        <el-row>
                            <el-col :span="2">
                                <span class="el-icon-s-custom"></span>
                            </el-col>
                            <el-col :span="22">
                                <el-input
                                        class="inps"
                                        placeholder="账号"
                                        v-model="loginForm.account"
                                >
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="" prop="passWord">
                        <el-row>
                            <el-col :span="2">
                                <span class="el-icon-lock"></span>
                            </el-col>
                            <el-col :span="22">
                                <el-input
                                        class="inps"
                                        type="password"
                                        placeholder="密码"
                                        v-model="loginForm.passWord"
                                ></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item style="margin-top: 55px">
                        <el-button type="primary" round class="submitBtn" @click="login()"
                        >登录
                        </el-button>
                        <el-button type="primary" round class="submitBtn" @click="register()"
                        >注册新账号
                        </el-button>
                    </el-form-item>
                    <div class="unlogin">
                    </div>
                </el-form>
            </div>
        </div>
    </template>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loginForm: {
                    account: "",
                    passWord: "",
                },
                loginRules: {
                    account: [{ required: true, message: "请输入账号", trigger: "blur" }],
                    passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
                },
            };
        },

        methods: {
            register(){
                axios({
                    url:"/save",
                    method:"post",
                    data: {
                        "name":this.loginForm.account,
                        "pas":this.loginForm.passWord
                    }
                }).then(res=>{
                    if (res.data.code=="200"){
                        alert("注册成功!")

                    }else {
                        alert("注册失败!")
                    }

                }).catch(res=>{
                    alert("注册失败!")
                })
            },
            login() {
                const userAccount = this.loginForm.account;
                const userPassword = this.loginForm.passWord;
                if (!userAccount) {
                    return this.$message({
                        type: "error",
                        message: "账号不能为空！",
                    });
                }
                if (!userPassword) {
                    return this.$message({
                        type: "error",
                        message: "密码不能为空！",
                    });
                }
                console.log("用户输入的账号为：", userAccount);
                console.log("用户输入的密码为：", userPassword);
                axios({
                    url:"/loginUser",
                    method:'post',
                    data: {
                        "name":this.loginForm.account,
                        "pas":this.loginForm.passWord
                    }
                }).then(res=>{
                    if (res.data.code=="200"){
                        localStorage.setItem("token",res.data.data)
                        window.open("index.html")
                    }else{
                        alert("登录失败!")
                    }
                }).catch(res=>{
                    alert("登录失败!")
                })


            },
        },

    });
</script>
</html>
